<template>
  <div v-loading="!config.events" element-loading-text="正在获取数据">
    <Event v-if="config.events" :key="config.events" />
    <br />
  </div>

  <div v-loading="!config.logs" element-loading-text="正在获取数据">
    <el-row style="align-items: center">
      <el-col :span="6" :offset="1">
        <span>日志记录 {{ config?.logs?.length }}</span>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-checkbox v-model="LogShowText" label="显示值" />
      </el-col>
      <el-col :span="8" :offset="1">
        <el-select-v2
          v-model="log_mode"
          :options="options"
          placeholder="请选择"
          size="large"
          style="width: 100%"
          @change="log_mode_change"
        />
      </el-col>
    </el-row>
    <Log v-if="config.logs" :text="LogShowText" :key="config.logs" />
  </div>
</template>
<script setup lang="ts">
import store from "~/utils/store";
import Log from "./log.vue";
import Event from "./event.vue";
const config = toRef(store);
const log_mode = ref(0);
const LogShowText = ref(true);

const options = [
  {
    value: 0,
    label: "实时/秒(60)",
  },
  {
    value: 1,
    label: "分钟(60)",
  },
  {
    value: 2,
    label: "小时(24)",
  },
  {
    value: 3,
    label: "分钟(1440)",
  },
];

function log_mode_change() {
  config.value.log_mode = log_mode.value;
  const server = config.value.server;
  if (!log_mode.value) config.value.logs = server.log_list.infos.sec;
  else if (log_mode.value == 1) config.value.logs = server.log_list.infos.min;
  else if (log_mode.value == 2) config.value.logs = server.log_list.infos.hour;
  else if (log_mode.value == 3) config.value.logs = server.log_list.infos.day;
}
</script>
<style scoped></style>
